<template>
	<div>
		<div class="w-maincon">
			<div v-if="info">
				<div class="w-tabtitle">{{ info.title }}</div>
        <div class="w-author" v-if="info.className === 'author_box'">
          <span>{{ info.createTime }}</span>
        </div>
				<div class="w-targetbox flex hb vc" v-if="info.className=='yjxm'">
					<div>
<!--						<div class="tar1 flex hs vc">-->
<!--							<p class="tar_title">目标捐赠额</p>-->
<!--							<p>{{ info.objective || 0 }} 元</p>-->
<!--						</div>-->
						<div class="tar2 flex hs vc">
							<p class="tar_title">累计捐赠金额</p>
							<p>{{ info.donate || 0 }} 元</p>
						</div>
						<div class="tar2 flex hs vc">
							<p class="tar_title">累计捐赠人次</p>
							<p>{{ info.peoples || 0 }} 次</p>
						</div>
					</div>

          <div class="w-a flex vc" @click="toDonate">
            <p>我要捐赠</p>
            <img src="../../assets/img/index/clickto.png" alt="" class="clickimg">
          </div>
				</div>
				<div class="w-tabcon" v-html="info.content"></div>
			</div>
			<div v-else>
				<div class="w-con">暂无</div>
			</div>
		</div>
	</div>
</template>

<script>
  import '../../style/content-styles.css'

	export default {
		name: 'detail',
		props: ['info'],
		data() {
			return {}
		},
		mounted(){
			console.log(this.info)
		},
		methods: {
      // 我要捐赠
      toDonate() {
        // 事件触发 显示捐赠模态框
        this.$eventBus.$emit('isShowCodeDialog', true, false)
      },
		}
	}
</script>

<style>
  .w-author {
    width: 100%;
    font-size: 16px;
    color: #8c939d;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: solid 1PX #cccccc;
  }
</style>


<style scoped>
	.w-maincon>>>.w-tabtitle {
		margin-top: 39px;
		/*margin-bottom: 47px;*/
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

  .w-tabcon {
    margin-top: 15px;
  }

	.w-tabcon>>>figure{
		display: block;
		margin: 0 auto;
	}
	.w-tabcon>>>img {
		max-width: 100%;
		/*max-height: 300px;*/
		/*display: block;*/
		margin: 0 auto;
	}

	.w-tabcon>>>p {
		/*text-indent: 30px;*/
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		line-height: 2;
		margin-bottom: 20px;
		text-align: justify;
	}

	/* .................. */
	.w-targetbox {
    margin-top: 47px;
		margin-bottom: 50px;
		line-height: 1;
	}

	.tar1 {
		padding: 10px 0;
		font-size: 18px;
		color: rgba(51, 51, 51, 1);
	}

	.tar2 {
		padding: 10px 0;
		font-size: 16px;
		color: rgba(51, 51, 51, 1);
	}

  .tar_title {
    margin-right: 20px;
  }

	.w-a {
		padding: 10px 16px;
		background: #791C1C;
		color: #fff;
		line-height: 1;
		border-radius: 5px;
		font-size: 18px;
		margin-right: 25px;
		cursor: pointer;

	}

	.clickimg {
		width: 28px;
		height: 28px;
		display: block;
		margin-left: 13px;
	}

</style>
